<template>
  <div>
    <el-dialog
      title="回访客户"
      :visible.sync="dialogFormVisible"
      width="50%"
      style="text-align: left"
    >
      <table style="font-weight: bold">
        <tr>
          <td><label for="label_11">姓名:</label></td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="name"
              id="label_11"
              style="width: 250px"
              :disabled="true"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td><label for="label_12">年龄:</label></td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="age"
              id="label_12"
              style="width: 250px"
              :disabled="true"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td><label for="label_13">家庭住址:</label></td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="addr"
              id="label_13"
              style="width: 250px"
              :disabled="true"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td><label for="label_17">爱好:</label></td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="hobby"
              id="label_17"
              style="width: 250px"
              :disabled="true"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td><label for="label_14">联系方式:</label></td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="phone"
              id="label_14"
              style="width: 250px"
              :disabled="true"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td><label for="label_20">客户来源:</label></td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="come"
              id="label_20"
              style="width: 250px"
              :disabled="true"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td>
            <label for="label_15"
              >下次回访: <span style="color: red">*</span></label
            >
          </td>
          <td>
            <DatePicker
              size="large"
              type="date"
              v-model="next_visit_at"
              placeholder="选择下次回访时间"
              style="width: 250px"
            ></DatePicker>
          </td>
        </tr>
        <tr>
          <td>
            <label for="label_15"
              >回访是否有效: <span style="color: red">*</span></label
            >
          </td>
          <td>
            <el-select v-model="is_ok" placeholder="请选择" id="label_15">
              <el-option
                v-for="item in visit_options"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr v-show="isShow">
          <td>
            <label>预计到院时间: <span style="color: red">*</span></label>
          </td>
          <td>
            <DatePicker
              size="large"
              type="datetime"
              v-model="come_at"
              placeholder="选择预计到院时间"
              style="width: 250px"
            ></DatePicker>
          </td>
        </tr>
        <tr>
          <td>
            <label for="label_18"
              >本次交流内容: <span style="color: red">*</span></label
            >
          </td>
          <td>
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="exchange_content"
              id="label_18"
              style="width: 250px"
            >
            </el-input>
          </td>
        </tr>
      </table>
      <hr />
      <div style="margin-top: 25px; text-align: left">
        <el-table
          :data="visitRecordData"
          stripe
          style="width: 100%"
          :row-style="{ height: '32px' }"
          :header-row-style="{ height: '10px' }"
          :cell-style="{ padding: '1px' }"
        >
          <el-table-column
            prop="created_at"
            label="回访时间"
            :formatter="handleFormatter"
            width="160"
          ></el-table-column>
          <el-table-column
            prop="is_ok"
            label="是否有效"
            width="100"
            :formatter="handleFormatter"
          ></el-table-column>
          <el-table-column
            prop="content"
            label="最近 3 次回访记录"
            width="450"
          ></el-table-column>
        </el-table>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCallCustomer">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dateFormat, getTimeStamp } from "@/utils/time.js";

export default {
  name: "CallPhone",
  data() {
    return {
      dialogFormVisible: false,
      customerId: 0,
      name: "",
      age: "",
      addr: "",
      phone: "",
      hobby: "", // 默认员工
      come: "",
      next_visit_at: 0, // 为时间戳
      come_at: 0, // 下次到院时间
      exchange_content: "",
      visitRecordData: [], // 以往回访记录
      is_ok: 1, // 回访是否有效
      visit_options: [
        { value: 1, label: "是" },
        { value: 0, label: "否" },
      ],
      isShow: true, // 是否显示到院时间, 只有在有效客户才显示
    };
  },
  methods: {
    handleCheckIsNull() {
      let errMsg = "";
      this.next_visit_at === "" ? (errMsg += "下次回访时间不能为空, ") : "";
      this.exchange_content === "" ? (errMsg += "本次交流内容不能为空, ") : "";
      return errMsg;
    },
    // 格式化
    handleFormatter(row, column) {
      if (column.property === "created_at") {
        return dateFormat(row.created_at);
      }
      if (column.property === "is_ok") {
        return row.is_ok === 0 ? "无效" : "有效";
      }
    },

    handleOpen(rowData) {
      // console.log(rowData)
      this.customerId = rowData.id;
      this.name = rowData.name;
      this.age = rowData.age;
      this.addr = rowData.addr;
      this.phone = rowData.phone;
      this.hobby = rowData.hobby;
      this.come = rowData.come;
      // 默认拜访时间是间隔 3 天
      let dateTime = new Date();
      dateTime = dateTime.setDate(dateTime.getDate() + 3);
      dateTime = new Date(dateTime);
      this.next_visit_at = dateTime;
      this.come_at = "";
      this.exchange_content = "";
      // 获取之前回访记录
      this.handelGetVisitRecord(rowData.id);
      this.dialogFormVisible = true;
    },
    // 回访客户
    handleCallCustomer() {
      let err = this.handleCheckIsNull();
      if (err !== "") {
        this.$message({ type: "error", message: err });
        return;
      }
      let nextVisitTime = getTimeStamp(this.next_visit_at);
      let comeAt = getTimeStamp(this.come_at);
      let reqData = {
        id: this.customerId,
        next_visit_at: nextVisitTime,
        exchange_content: this.exchange_content,
        user_id: this.COOKIE.get("uid"),
        is_ok: this.is_ok, // 是否有效
        come_at: comeAt, // 预计到院时间
      };
      console.log("reqData: ", reqData);
      this.AXIOS.post("/mycrmapi/visit/callCustomer", reqData)
        .then((resp) => {
          // console.log(resp)
          let statusCode = resp.data.status;
          if (statusCode === 1) {
            this.$message({ type: "success", message: "保存成功" });
            this.dialogFormVisible = false; // 关闭对话框
            // 调用父组件中的 handleInitCustomerListData, 刷新 list 数据
            this.$parent.handleInitVisitListData();
          } else {
            this.$message({ type: "error", message: resp.data.data });
          }
        })
        .catch((err) => {
          this.$message({ type: "error", message: err });
        });
    },
    handelGetVisitRecord(customerId) {
      this.AXIOS.get(`/mycrmapi/visit/getVisitRecord/${customerId}/no`)
        .then((resp) => {
          console.log(resp.data);
          let statusCode = resp.data.status;
          if (statusCode === 1) {
            this.visitRecordData = resp.data.data;
          }
        })
        .catch((err) => {
          this.$message({ type: "error", message: err });
        });
    },
  },
  watch: {
    is_ok: function (v) {
      this.isShow = v !== 0;
    },
  },
};
</script>

<style scoped>
</style>
